<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box">
		<view class="uni-global-title">
			系统设置 / 城市管理
		</view>
		<view class="">
			<view class="class-manage-top">
				<view class=""> 
					<u-button type="primary" size="mini" @click="goUrl('./add?total='+count)" >
						<text class="iconfont icon-shuliang-zengjia"></text>
						<text> &nbsp;新 增</text>
					</u-button>
				</view>
				
			</view>
			<u-table class="u-table-senior">
				<u-tr style="margin-right:15px;">
					<u-th class="u-table-th" align="left" >标题</u-th>
					<u-th class="u-table-th">首字母</u-th>
					<u-th class="u-table-th">拼音数据</u-th>
					<u-th class="u-table-th" width="50px">排序</u-th>
					<u-th class="u-table-th">城市坐标</u-th>
					<u-th class="u-table-th">是否展示</u-th>
					<u-th width="150px">操作</u-th>
				</u-tr>
				<view class="u-table-senior-body" style="height:65vh">
					<u-empty text="暂无订单" mode="order" v-if="nullData" ></u-empty>
					<loaders v-if="data==0 && !nullData"></loaders>
					<view v-for="(item,index) in data" :key="index" >
						<u-tr  class="u-table-tr" style="background-color:#fafafa" >
							<u-td class="u-table-td" align="left" >
								<view :style="`text-align:left; padding-left:${10}px;`">
									{{item.title}}
								</view>
							</u-td>
							
							<u-td class="u-table-td">{{item.first}}</u-td>
							<u-td class="u-table-td">{{item.en}}</u-td>
							<u-td class="u-table-td" width="50px">
								{{item.sort}}
							</u-td>
							<u-td class="u-table-td">{{item.location?item.location.coordinates:'暂无坐标'}}</u-td>
							<u-td class="u-table-td">
								{{item.is_show ? '✅' :'❌'}}
							</u-td>
							<u-td class="u-table-td " width="150px">
								<view class="u-table-td-util">
									<u-button size="mini" @click="goUrl('./update?uid='+item._id)" type="primary" >
										<text class="iconfont icon-xiugai"></text>
										<text>修改</text>
									</u-button>
									<u-button size="mini" type="error" @click="removeData(item,index)" >
										<text class="iconfont icon-lajitong"></text>
										<text>删除</text>
									</u-button>
								</view>
						
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" v-for="(child,key) in item.children" :key="key" >
							<u-td class="u-table-td" align="left" >
								<view class="" :style="`text-align:left;padding-left:${20}px;`">
									<text  class="iconfont icon-t" > </text>
									<text>
										{{child.title}}
									</text>
								</view>
							</u-td>
							
							<u-td class="u-table-td">{{child.first}}</u-td>
							<u-td class="u-table-td">{{child.en}}</u-td>
							<u-td class="u-table-td" width="50px">
								{{child.sort}}
							</u-td>
							<u-td class="u-table-td">{{child.location?child.location.coordinates:'暂无坐标'}}</u-td>
							<u-td class="u-table-td">
								{{child.is_show ? '✅' :'❌'}}
							</u-td>
							<u-td class="u-table-td " width="150px">
								<view class="u-table-td-util">
									
									<u-button size="mini" disabled="" type="primary" >
										<text class="iconfont icon-xiugai"></text>
										<text>修改</text>
									</u-button>
									<u-button size="mini" type="error" disabled="" >
										<text class="iconfont icon-lajitong"></text>
										<text>删除</text>
									</u-button>
								</view>
						
							</u-td>
						</u-tr>
					</view >
					
				</view>
				<view class="u-table-senior-pagination">
					<uni-pagination @change="enventPages" :total="count"></uni-pagination>
				</view>
			</u-table>
		</view>


	</view>
	<u-toast ref="uToast" />
</template>

<script>
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			return {
				loading:false,
				nullData:false,
				data: [],
				where: {},
				// 分页
				limit:10,
				skip:0,
				count:0,
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				global.getList('city',this.where,"sort asc","_id,title,en,first,location,is_show,children,sort" ,this.skip,this.limit).then(result => {
					const data = result.data ;
					this.count = result.count;
					this.data = data;
					console.log(data);
					this.loading = false ;
					if(  data.length==0 )return this.nullData = true;
				})
			},
			// 删除数据
			async removeData(item,index){
				const modal = await uni.showModal({title:"您确认删除吗?",content:"数据删除后不可回复,请慎重"}) ;
				if(!modal.confirm) return ;
				if(!item._id) return ;
				// const shop = await global.getList('')
				this.loading = true ;
				const userinfo = await global.getList('userinfo',{"location._id":item._id },"_id asc","_id,name");
				if(userinfo.data.length != 0){
					this.loading = false ;
					this.$refs.uToast.show({title:'当前地区旗下已有技师',type: 'error',duration:1500,position:'top'})
				}
				const Delete = await global.deleteData('city',{_id:item._id})
				if(Delete.affectedDocs == 1){
					this.$refs.uToast.show({title:'删除成功',type: 'success',duration:1500,position:'top',
						callback:()=>{
							this.data.splice(index,1);
							this.loading = false;
						}
					})
				}
			},
			// 分页
			enventPages(val){
				this.loading = true
				this.skip = ( val.current-1) * 10 ;
				this.getData()
			},
			goUrl(url){
				uni.navigateTo({url})
			},
			// 图片放大
			eventImage(image) {
				if(typeof image == 'string'){
					image = [image];
				}
				uni.previewImage({
					urls: image,
				});
			},
		}
	}
</script>

<style  scoped lang="scss" >
	.class-manage-top{
		display: flex;
		padding:5px 20px ;
		justify-content:flex-end;
	}
</style>